<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命周期的顺序</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <h1>n的值:{{n}}</h1>
<!--    销毁之后 原生js的事件还可以用 但是 关于到vue的动作就没有了    -->
    <button @click="add">点我n+1</button>
    <button @click="bye">点我销毁vm</button>
</div>
<script>
    Vue.config.productionTip = false;
    const vm = new Vue({
        el: '#root',
        data: {
            n:1
        },
        methods:{
            bye() {
                //销毁vm
                this.$destroy();
            },
            add() {
                console.log('add');
                this.n++;
            }
        },
        //初始化生命周期、事件  数据代理还没开始
        beforeCreate() {
            //vm中没有_data 无法访问到vm中的数据 和方法
            console.log('beforeCreate');
        },
        created() {
            //数据监测 和 数据代理执行
            console.log('created');
        },
        beforeMount() {
            //页面展现的是未经vue编译的dom 所有的dom操作都是无效的
            console.log('beforeMount');
        },
        mounted() {
            //初始化完成 一般展现的是 vue 编译好的dom结构
            console.log('mounted');
        },
        beforeUpdate() {
            //此时数据是新的(已经改变) 页面是旧的
            console.log('beforeUpdate');
            console.log(this)
            // debugger
        },
        //经过新旧dom的比较 生成新的dom 模板
        updated() {
            //完成更新
            console.log('updated');
            console.log(this);
        },
        beforeDestroy() {
            //销毁之前 vm所有的data和method、指令等都可以用 马上执行销毁程序
            //不能做任何动作了 即使都可以用 没有效果
            console.log('beforeDestroy');
        },
        destroy() {
            console.log('vm 被销毁...');
        }
    });
</script>
</body>
</html>